<script setup lang="ts">
defineOptions({
  name: "current"
});

import { ref, onMounted, onUnmounted, markRaw } from "vue";
import { Tickets, Modeling, ChatLineSquare } from "@px-ui/icons-vue";
import { useRouter } from "vue-router";
import { useRouterStoreHook } from "@/store/modules/router";
import { queryFabCurrentPm, queryFabPmDetail } from "@/api/modules/fab";
import commonTable from "@/views/common/components/commonTable/index.vue";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import pmTaskDetail from "./pmTaskDetail.vue";
import pmTaskEditNotes from "./pmTaskEditNotes.vue";
import { useTableCloumns, useSearchOption } from "./currentHooks";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

const router = useRouter();
const routerStore = useRouterStoreHook();

const searchLoading = ref<boolean>(false);
const gap = 88;
const defaultHeight = 606;
const objectModelTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);
const commonSearchRef = ref<CommonSearch.SearchFormRefType>(null);
const scrollbarHeight = ref<number>(defaultHeight);
const searchOption = ref<Array<CommonSearch.SearchOption>>(useSearchOption());

const toDetailPageHandler = (scope: any) => {
  const {
    row: { eqpId = "" }
  } = scope;
  const path = "/fullScreen/fab/detail";
  const query = { eqpId };
  let params = encodeURI(JSON.stringify(query));
  const { href } = router.resolve({ path, query: { params } });
  window.open(href, "_blank");
};

const tableCloumns = ref<Array<CommonTable.TableCloumnsType>>(useTableCloumns(false, toDetailPageHandler));
const params = ref<any>({});
const pmTaskDetailData = ref<Record<string, any>>({});
const pmTaskDetailVisible = ref<boolean>(false);
const jobNo = ref<string>("");
const pmTaskEditNotesVisible = ref<boolean>(false);

const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "机台详情",
    auth: `${routerStore.subject}_FAB_MAINTENANCE_PMTASK_CURRENT_FAB_DETAIL_BTN`,
    icon: markRaw(Modeling),
    click: (scope: any) => toDetailPageHandler(scope)
  },
  {
    content: "任务详情",
    auth: `${routerStore.subject}_FAB_MAINTENANCE_PMTASK_CURRENT_PLAN_DETAIL_BTN`,
    icon: markRaw(Tickets),
    click: (scope: any) => pmDetailHandler(scope)
  },
  {
    content: "评论",
    auth: `${routerStore.subject}_FAB_MAINTENANCE_PMTASK_CURRENT_PLAN_EDIT_BTN`,
    icon: markRaw(ChatLineSquare),
    click: (scope: any) => editPmHandler(scope)
  }
];

let defaultParams: any = {};
let currentParams: any = {};

const getRowKey = row => {
  return row.jobNo;
};

const headerCellStyleFn = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType): Record<string, string> => {
  const style = {};
  // if (columnIndex === 2 || columnIndex === 5) {
  if (columnIndex === 6) {
    style["text-align"] = "center";
  }
  return style;
};

const updateParams = () => {
  params.value = { ...defaultParams, ...currentParams };
};

const submitSearchFormHandler = (form: any) => {
  currentParams = { ...currentParams, ...form };
  updateParams();
};

const resetSearchFormHandler = () => {
  currentParams = {};
  updateParams();
};

const sortChangeHandler = ({ column, order }: CommonTable.SortParams) => {
  const { property: columnName = "" } = column;
  // ascending  descending
  const asc = order === "ascending" ? true : order === "descending" ? false : order;
  const orderList = [{ columnName, asc }];
  if (order) {
    currentParams["orderList"] = orderList;
  } else {
    delete currentParams.orderList;
  }
  updateParams();
};

const pmDetailHandler = async ({ row }: any) => {
  const { jobNo } = row;
  // const jobNo = "J0000177";
  const params = { jobNo };
  const res = await queryFabPmDetail(params);
  if (!res) return;
  pmTaskDetailData.value = res;
  pmTaskDetailVisible.value = true;
};

const editPmHandler = async ({ row }: any) => {
  jobNo.value = row.jobNo as string;
  pmTaskEditNotesVisible.value = true;
};

onMounted(async () => {
  await useUpdateDomHeight(scrollbarHeight, objectModelTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>

<template>
  <div v-loading="searchLoading" class="current-pm">
    <div class="current-pm-search">
      <commonSearch
        v-if="searchOption?.length"
        ref="commonSearchRef"
        v-model:loading="searchLoading"
        :row-num="4"
        :option="searchOption"
        :operation-span="3"
        @submit="submitSearchFormHandler"
        @reset="resetSearchFormHandler"
      />
    </div>
    <div ref="objectModelTableRef" class="current-pm-table">
      <commonTable
        ref="commonTableRef"
        indexNeed
        :operationOptions="operationOptions"
        :tableCloumns="tableCloumns"
        :height="scrollbarHeight"
        :row-key="getRowKey"
        :header-cell-style="headerCellStyleFn"
        :axiosApi="queryFabCurrentPm"
        :params="params"
        @sort-change="sortChangeHandler"
      />
    </div>
    <pmTaskDetail v-if="pmTaskDetailVisible" v-model="pmTaskDetailVisible" :data="pmTaskDetailData" />
    <pmTaskEditNotes v-if="pmTaskEditNotesVisible" v-model="pmTaskEditNotesVisible" :jobNo="jobNo" />
  </div>
</template>

<style lang="scss" scoped>
.current-pm {
  width: 100%;
  background-color: #fff;

  .current-pm-search {
    width: 100%;
  }

  .current-pm-btns {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }

  .current-pm-table {
    margin-top: 16px;
  }
}
</style>
